<template>
  <div class="bigBox">
    <div class="leftBox">
      <div class="titleBox">
        <div class="title">ORDER聚造</div>
        <div class="lineBox">
          <div class="line"></div>
        </div>
      </div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="transparent"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>首页管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
            <el-menu-item index="/index/category">分类区管理</el-menu-item>
            <el-menu-item index="/index/recomend">为你推荐管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/sort">分类管理</el-menu-item>
            <el-menu-item index="/index/brands">品牌管理</el-menu-item>
            <el-menu-item index="/index/good">单品管理</el-menu-item>
            <el-menu-item index="/index/goods">商品管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>新闻管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/news">新闻管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="rightBox">
      <div class="head">
        <div class="headBox">
          <b style="white-space: nowrap;margin-top: 40px;margin-left: 40px;">{{ $route.meta.title }}</b>
          <div class="userPicture1">
            <img
              slot="prefix"
              class="userPicture"
              src="../assets/userPicture.png"
            />
          </div>

          <el-tooltip placement="bottom">
            <div slot="content" @click="dialogFormVisible = true" class="cursor">修改密码</div>
            <div class="tt">
              <span class="topText1">{{ nickName }}</span>
              <div class="topText2">, 你好！</div>
            </div>
          </el-tooltip>


          <el-button
            type="danger"
            class="ad"
            round
            style="display: flex; justify-content: center; align-items: center"
            @click="logout"
          >
            <i class="el-icon-switch-button"></i>
            退出
          </el-button>

          
        </div>
      
      </div>

      <router-view></router-view>
      
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules= "rules" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="password" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import md5 from "js-md5";
console.log(md5("../assets/userPicture.png"));
export default {
  name: "index",
  components: {},
  data() {
    return {
      photo: '',
      nickName: '',
      dialogFormVisible: false,
      form:{
        passWord: '',
        newPassWord: '',
        reNewPassWord: ''
      },
      group: {//选中的群组
        groupId: '',
        groupName: ''
      },
      menus: [],//菜单树
      rules:{ 
        passWord: [
          { required: true, message: "请输入原密码", trigger: "blur" }
          ],
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        reNewPassWord: [
          { required: true, message: "请重复输入新密码", trigger: "blur" },
          { validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newPassWord) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
            }, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changePassWord(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url:'/admin/changePassWord',
            method: 'POST',
            data:{
              passWord:md5(this.form.passWord),
              newPassWord:md5(this.form.newPassWord)
            }
          }).then(res => {
            if(!res.errorMsg){
              this.$message({
                message: '修改密码成功',
                type: 'success',
                duration:3000
              });
              setTimeout(()=>{
                location.href = '#/login'
              },3000)
            }
          })
        } else {
          return false;
        }
      })
    },
    logout() {
      this.$confirm("是否退出登录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/admin/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            //跳转页面
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
  },
  created() {
    ///从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if (!user) {
      // this.$router.push("./login");
      location.href = location.origin + "#/login";
    } else {
      ///解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/userPicture.png");
      ///设置昵称
      this.nickName = user.nickName || "小王";
      ///获取菜单
      //this.getMenus()
    }
  },
  mounted() {},
};
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.leftBox {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  background-color: black;
}
.rightBox {
  margin-left: 15%;
  width: 85%;
  height: 100%;
  background: #eff6fc;
  overflow-x: hidden;
  opacity: 1;
}
.titleBox {
  margin-top: 6px;
  height: 28px;
  display: flex;
}
.title {
  margin-top: 6px;
  margin-left: 30px;
  width: 98px;
  height: 22px;
  font-size: 18px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #ffffff;
  white-space: nowrap;
}
.lineBox {
  margin-left: 20px;
  margin-top: 10px;
  width: 14px;
  height: 11px;
  border-bottom: #fff solid 2px;
  border-top: #fff solid 2px;
}
.line {
  margin-top: 4px;
  border: #fff solid 1px;
}
.listBox {
  margin-top: 23px;
  margin-left: 16px;
  width: 157px;
  height: 18px;
  display: flex;
}
.house {
  width: 15px;
  height: 15px;
}
.set {
  width: 15px;
  height: 15px;
}
.upSign {
  margin-left: 45px;
  width: 19px;
  height: 15px;
}
.lists {
  margin-left: 8px;
  width: 27px;
  height: 18px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #aaaaaa;
  white-space: nowrap;
}
.kongBox {
  margin-left: 12px;
}
.changBox {
  margin-left: 110px;
  height: 18px;
  border-right: 4px solid #000000;
}
.head {
  width: 100%;
  height: 88px;
}
.headBox {
  width: 100%;
  height: 88px;
  display: flex;
}

.date {
  margin-top: 22px;
  margin-left: 38px;
  width: 27px;
  height: 18px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #7c7c7d;
  white-space: nowrap;
}
.selectDate {
  margin-top: 9px;
  margin-left: 15px;
  width: 175px;
  height: 42px;
  border-radius: 5px;
  border: 2px solid #eff6fc;
  display: flex;
}

.selectDateText {
  margin-top: 9px;
  margin-left: 15px;
  height: 18px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #eff6fc;
  white-space: nowrap;
}
.dateImg {
  margin-top: 5px;
  margin-left: 25px;
  width: 25px;
  height: 25px;
}
.minibox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  width: 71px;
  height: 31px;
  border-radius: 5px;
  opacity: 1;
}
.searchSign {
  padding-bottom: 4px;
  width: 10px;
  height: 10px;
}
.deleteSign {
  padding-bottom: 4px;
  width: 10px;
  height: 10px;
}
.texts {
  margin-left: 10px;
  width: 23px;
  height: 16px;
  font-size: 12px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #ffffff;
  white-space: nowrap;
}
.topText {
  margin-top: 41px;
  margin-left: 31px;
  width: 143px;
  height: 20px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #2c2c2c;
  white-space: nowrap;
}
.userPicture {
  width: 47px;
  height: 47px;
}
.userPicture1 {
  margin-left: 660px;
  margin-top: 30px;
  border-radius: 50%;
  width: 47px;
  height: 47px;
  background: #7c7c7d;
}
.tt {
  margin-top: 43px;
  height: 19px;
  display: flex;
}
.topText1 {
  margin-left: 5px;
  height: 19px;
  font-size: 14px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #2c2c2c;
  white-space: nowrap;
}
.topText2 {
  height: 19px;
  font-size: 14px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #2c2c2c;
  white-space: nowrap;
}
.ad {
  margin-top: 39px;
  margin-left: 4px;
  width: 69px;
  height: 28px;
}



.edit {
  margin-top: 5px;
  width: 71px;
  height: 31px;
}
.delete {
  margin-top: 5px;
  margin-left: 5px;
  width: 71px;
  height: 31px;
}
.tongjiBoxs {
  display: flex;
  margin-top: 5px;
  margin-left: 40px;
  width: 1020px;
  height: 41px;
}
.tongjiBox1 {
  display: flex;
  width: 248px;
  height: 41px;
  background: #fff;
}
.tongjiBox2 {
  display: flex;
  margin-left: 580px;
  width: 350px;
  height: 41px;
  background: #fff;
}
.slectY {
  display: flex;
  margin-left: 13px;
  width: 100px;
  height: 28px;
  border: 0.1px solid #aaaaaa;
}
.slectText {
  margin-top: 4px;
  margin-left: 4px;
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 1px;
  white-space: nowrap;
}
.total {
  margin-top: 4px;
  margin-left: 5px;
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 2px;
  white-space: nowrap;
}
.downSign {
  margin-left: 8px;
  width: 6px;
  height: 4px;
}
.signBack {
  margin-left: 8px;
  width: 6px;
  height: 4px;
}
.rightSign {
  margin-left: 10px;
  width: 6px;
  height: 4px;
}
.numbers {
  margin-top: 5px;
  margin-left: 25px;
  font-size: 10px;
}
.qianwang {
  margin-top: 5px;
  margin-left: 20px;
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 2px;
  white-space: nowrap;
}
.yie {
  margin-top: 5px;
  margin-left: 2px;
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 2px;
  white-space: nowrap;
}
.smallBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  width: 40px;
  height: 23px;
  border: 0.1px solid #aaaaaa;
  font-size: 10px;
  color: #aaaaaa;
  letter-spacing: 2px;
  white-space: nowrap;
}
</style>
